<template>
    <div>
        <el-card class="box-card">
            <div style="line-height: 31px;">
                
                <el-form inline label-width="100px" style="display: inline-block;">
                  <el-form-item label="应用名称">
                      <el-input v-model.trim="appName" placeholder="精确查询"></el-input>
                  </el-form-item>
                  <el-form-item label="HTTP方法">
                      <el-input v-model.trim="HttpMethod" placeholder="精确查询"></el-input>
                  </el-form-item>
                  <el-form-item label="用户名称">
                      <el-input v-model.trim="UserName" placeholder="精确查询"></el-input>
                  </el-form-item>
                  <el-form-item label="客户端IP">
                      <el-input v-model.trim="ClientIpAddress" placeholder="精确查询"></el-input>
                  </el-form-item>
                  <el-form-item label="URL地址">
                      <el-input v-model.trim="Url" placeholder="模糊查询"></el-input>
                  </el-form-item>
                  <el-form-item label="HTTP状态码">
                      <el-input-number v-model="HttpStatusCode" :min="0" placeholder="精确查询" controls-position="right"></el-input-number>
                  </el-form-item>
                  <el-form-item label="时间">
                      <el-date-picker
                      value-format='yyyy-MM-dd HH:mm:ss'
                        v-model="timeInterval"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                  </el-form-item>
                  <el-form-item label="耗时(毫秒)  ≤ " label-width="150px">
                      <el-input-number v-model="ExecuteDuration" :min="0" controls-position="right"></el-input-number>
                  </el-form-item>
                   <el-button  type="primary" icon="el-icon-search" @click="searchList()">查询</el-button>
                </el-form>
                
                <!-- <div>
                    <el-button type="primary" @click="searchList(2)">导出列表</el-button>
                </div> -->
            </div>
            <div class="right-main">
             <el-table
                :data="tableData"
                style="width: 100%;"
                :default-sort = "{prop: 'executionTime', order: 'descending'}"
                @sort-change="sortChange"
                border
                >
                <el-table-column
                  prop="applicationName"
                  label="应用名称"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="用户名称"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop="url"
                  label="url地址"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop="httpMethod"
                  label="HTTP方法"
                  align="center"
                  >
                  </el-table-column>
                <el-table-column
                  prop="executionTime"
                  label="执行时间"
                  align="center"
                  sortable
                  >
                </el-table-column>
                <el-table-column
                prop="executionDuration"
                label="执行耗时（毫秒）"
                align="center"
                sortable
                >
                </el-table-column>

                <el-table-column
                  prop="clientIpAddress"
                  label="客户端IP"
                  align="center"
                  >
                </el-table-column>
                <!-- <el-table-column
                  prop="clientName"
                  label="客户端名称"
                  align="center"
                  >
                </el-table-column> -->
                
                <!-- <el-table-column
                  prop="browserInfo"
                  label="浏览器信息"
                  align="center"
                  >
                </el-table-column> -->                
                <el-table-column
                  prop=""
                  label="异常信息"
                  align="center"
                  >
                  <template slot-scope="scope">
                    <p class="paramsClass" @click="lookError(scope.row.exceptions)">{{scope.row.exceptions}}</p>
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  prop="comments"
                  label="备注"
                  align="center"
                  >
                </el-table-column> -->
                <el-table-column
                  prop="httpStatusCode"
                  label="HTTP状态码"
                  align="center"
                  >
                </el-table-column>
                <el-table-column
                  prop=""
                  label="执行动作"
                  align="center"
                  >
                  <template slot-scope="scope">
                    <el-button type="primary"  @click="lookAction(scope.row.actions)">执行动作</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
          <div class="pageClass">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="tablePage"
              :page-sizes="page.pageSizes"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="logList.totalCount">
            </el-pagination>
          </div>
        </el-card>
        <!-- 执行动作弹窗 -->
        <div>
          <el-dialog title="action列表" :visible.sync="dialogTableVisible">
            <div class="dig">
            <el-table :data="actionData" border>
              <el-table-column align="center" property="serviceName" label="服务名称" ></el-table-column>
              <el-table-column align="center" property="methodName" label="方法名称" ></el-table-column>
              <el-table-column align="center" property="" label="参数">
                <template slot-scope="scope">
                    <p class="paramsClass">{{scope.row.parameters}}</p>
                  </template>
              </el-table-column>
              <el-table-column align="center" property="executionTime" label="执行时间"></el-table-column>
              <el-table-column align="center" property="executionDuration" label="耗时（毫秒）"></el-table-column>
            </el-table>
            </div>
          </el-dialog>
        </div>
        <!-- 异常信息弹框 -->
        <div>
          
            <el-dialog title="异常信息" :visible.sync="dialogError">
              <div class="dig">
              {{errMessge}}
               </div>
            </el-dialog>
         
        </div>
    </div>
</template>
<script>
import cvueTable from '@/components/cvue-table'
import {baseUrl} from '@/config/config'
export default {
    name: 'schoolList',
    components: {
       cvueTable
    },
    data () {
      return {
        HttpMethod: '',
        UserName: '',
        ClientIpAddress: '',
        appName: '',
        Url: '',
        HttpStatusCode: undefined,
        ExecuteDuration: undefined,
        Sorting: 'executionTime DESC',
        timeInterval: [],
         tablePage: 1,
         tableLoading: false,
        page: {
            total: 0, // 总页数
            currentPage: 1, // 当前页数
            pageSize: 10, // 每页显示多少条
            pageSizes: [10, 20, 30, 40, 50]
        },
        tableData: [],
        logList: '',
        actionData: [],
        dialogTableVisible: false,
        dialogError: false,
        errMessge: ''
      }
    },
    mounted () {
      this.getLogList()
    },
    methods: {
      lookError (err) {
        this.dialogError = true
        this.errMessge = err
      },
            // 改变pagesize
        handleSizeChange (val) {
        this.page.pageSize = val
        this.getLogList()
        },
        // 改变页码
        handleCurrentChange (val) {
        this.tablePage = val
        this.getLogList()
        },
       searchList () {
         this.tablePage = 1
         this.getLogList()
       },
        // 获取学校列表
        getLogList () {
           var params = {
             HttpMethod: this.HttpMethod,
             UserName: this.UserName,
             ClientIpAddress: this.ClientIpAddress,
             appName: this.appName,
             Url: this.Url,
             HttpStatusCode: this.HttpStatusCode,
             ExecuteDuration: this.ExecuteDuration,
             Sorting: this.Sorting,
              PageNum: this.tablePage,
              PageSize: this.page.pageSize
            }
            // if (this.ExecuteDuration) {
            //     params.ExecuteDuration = parseFloat(this.ExecuteDuration) 
            // }
            if (this.timeInterval && this.timeInterval.length > 0) {
               params.BeginTime = this.timeInterval[0]
               params.EndTime = this.timeInterval[1]
            }
           this.$store.dispatch('logManage/GetLogList', params).then(res => {
              this.logList = res
              // for (var obj of res.items) {
              //   obj.executionDuration = obj.executionDuration / 1000
              // }
              this.tableData = res.items
              this.page.total = res.totalCount
              this.page.currentPage = this.tablePage
          })   
        },
        sortChange (column, prop, order) {
          if (column.order == 'descending') {
            if (column.prop == 'executionDuration') {
                this.Sorting = 'executionDuration DESC'
              }
            if (column.prop == 'executionTime') {
              this.Sorting = 'executionTime DESC'
            }
          }
          if (column.order == 'ascending') {
            if (column.prop == 'executionDuration') {
                this.Sorting = 'executionDuration ASC'
              }
            if (column.prop == 'executionTime') {
              this.Sorting = 'executionTime ASC'
            }
          }
          this.getLogList()
        },
        lookAction (actionList) {
          // for (var obj of actionList) {
          //       obj.executionDuration = obj.executionDuration / 1000
          //     }
          this.dialogTableVisible = true
          this.actionData = actionList
        }
    }
}
</script>
<style scoped>
.paramsClass{
  max-height: 100px;
    overflow: auto;
    cursor: pointer;
}
.pageClass{
  text-align: right;
  margin-top: 20px;
}
.dig{
  height: 500px;
  overflow: auto;
 }
</style>
